<script setup>
import {h, ref} from "vue";
import {PlusOutlined,DeleteOutlined,AuditOutlined,SearchOutlined} from "@ant-design/icons-vue";



//数据源
const dataSource = ref([  {
  "id": "001",
  "batch": "B001",
  "figure_number": "F001",
  "num": 10,
  "price": 100,
  "amount": 1000,
  "collection_date": "2023-10-01",
  "recipient": "张三",
  "repair_equipment": "设备A",
  "bin_location": "A1"
},
  {
    "id": "002",
    "batch": "B002",
    "figure_number": "F002",
    "num": 20,
    "price": 200,
    "amount": 4000,
    "collection_date": "2023-10-02",
    "recipient": "李四",
    "repair_equipment": "设备B",
    "bin_location": "B2"
  },])


</script>

<template>
  <!--条-->
  <a-card class="page-container" title="备品领用" head-style="font-size:30px">
    <template #extra>
      <div class="header">
        <div class="extra">
          <a-button type="primary"><PlusOutlined />新增</a-button>
          <a-button type="primary" danger><DeleteOutlined />删除</a-button>
          <a-button type="primary" style="background: gold"><AuditOutlined />审核</a-button>
        </div>
      </div>
    </template>
    <a-form layout="inline" class="a-form" style="height: 60px">
      <a-space direction="horizontal" >
        <a-form-item>
          <a-input placeholder="编码" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="名称" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="领用人" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="维修设备" >
            <template #prefix><SearchOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="日期起始" >
          </a-input>
        </a-form-item>
        <a-form-item>——</a-form-item>
        <a-form-item>
          <a-input placeholder="日期截至" >
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)">查找匹配项</a-button>
        </a-form-item>
      </a-space>
    </a-form>
    <!-- 设备台账列表 -->
    <a-table :dataSource="dataSource"  style="width: 100%;" :row-selection="{}">

      <a-table-column title="编码" data-index="id" align="center"/>
      <a-table-column title="批次" data-index="batch" align="center"/>
      <a-table-column title="图号" data-index="figure_number" align="center"/>
      <a-table-column title="数量" data-index="num" align="center"/>
      <a-table-column title="价格" data-index="price" align="center"/>
      <a-table-column title="金额" data-index="amount" align="center"/>
      <a-table-column title="领用日期" data-index="collection_date" align="center"/>
      <a-table-column title="领用人" data-index="recipient" align="center"/>
      <a-table-column title="维修设备" data-index="repair_equipment" align="center"/>
      <a-table-column title="库位" data-index="bin_location" align="center"/>
    </a-table>
  </a-card>


</template>


<style lang="scss" scoped>
.page-container{
  margin-top: 2%;
  width: 98%;
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .a-form{
    display: flex;
    align-items: center;

  }
  a-table{
    &-column{

    }
  }
}
.input-list{
  .input-div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%;
    .input-item{
      width: 45%;
    }
    .input-red{
      color:red;
    }
  }


}

</style>